<template>
	<view class="container">
		<block
			v-if="list.length > 0"
			v-for="(item, index) in list"
			:key="index"
		>
			<uni-section type="line" titleColor="#666" :title="item.year">
				<uni-card
					spacing="0"
					margin="0"
					padding="24rpx"
					:border="false"
					v-for="(v, i) in item.djCostList"
					:key="i"
					@tap="goDetail(v.djCostId)"
				>
					<view class="box">
						<view class="slot-box">
							<image
								class="slot-image"
								src="/static/dangjian/dangyuan/money-shadow.png"
							/>
							<text>{{ renderMonth(v.djCostTime) }}</text>
						</view>
						<text>{{ v.djCostValue || 0 }}元</text>
					</view>
				</uni-card>
			</uni-section>
		</block>
		<view v-else class="no-data">暂无数据</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPayRecord } from '@/net/dangyuanguanli'

const list = ref({})
onLoad(async params => {
	const res = await getPayRecord({ djUserId: params.id })
	list.value = res.data
})

const renderMonth = date => {
	if (typeof date !== 'string' || date == '') return ''
	const month = new Date(date).getMonth() + 1
	return month + '月党费'
}
const goDetail = id => {
	uni.navigateTo({ url: `./partyDuesDetail?id=${id}` })
}
</script>

<style lang="scss" scoped>
@import '/static/common.scss';
:deep(.uni-section .uni-section-header) {
	padding-bottom: 20rpx;
	padding-left: 0;
	padding-top: 0;
}
.uni-section {
	background-color: transparent;
	padding: 24rpx;
}
.box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #0e1634;
	font-size: 30rpx;
	> text:last-child {
		font-weight: bold;
	}
}
</style>
